<template>
  <!-- 做导航 -->

  <!-- {{ $route.meta }} -->

<div v-if=" $route.meta.useFrame==false">
  <router-view></router-view>
</div>

<div v-else>
  <el-container>
    <el-header class="header">

      <el-row justify="space-between">
        <el-col :span="4 " class="logo">
          <img src="https://element-plus.gitee.io/images/element-plus-logo.svg">
        </el-col>
        <el-col :span="3">
          <el-dropdown @command="clickDropdown">
            <span class="el-dropdown-link">
              <el-icon><User /></el-icon>
              {{ store1.user.nickName }}
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>Action 1</el-dropdown-item>
               
                <el-dropdown-item command="logout" divided >注销</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="auto" class="menu">
        <Menu></Menu>
      </el-aside>
      <el-main>
        <Nav></Nav>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</div>

  <!-- <RouterView></RouterView> -->
  <!-- <router-view></router-view> -->
  <!-- 以上这两种方式是相同的 -->
</template>

<script setup lang="ts">
import { ref ,onMounted} from "vue";
import Menu from "@/components/Menu.vue"
import {useRoute,useRouter} from 'vue-router'
// 消息弹框
import { ElMessageBox } from 'element-plus'
// pinia localStore
import useStore1 from '@/store/store1'
import Nav from "@/components/Nav.vue";
const store1 = useStore1()

const route = useRoute() //不带r,获取当前页面相关信息，比如参数
const router = useRouter() //带r,负责页面跳转
const name = ref('游客')
onMounted(()=>{

})
const clickDropdown = (arg:any)=>{
  if(arg=="logout"){
    
    ElMessageBox.confirm(
    '您确定退出?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      store1.token = ""
      router.push({name:"user-login"})

    })
    .catch(() => {
    })
  }
}
</script>

<style scoped>
.header {
  background-color: #545c64;
  height: 60px;
  line-height: 60px;
}
.el-dropdown{
  line-height: 60px;
  color: white;
}
/* 点击没有边框 */
.el-dropdown-link {
  outline: none;
}
.menu{
  background-color: #545c64;
}
.logo img{
  width: 113px;

}
</style>